<template>
  <el-row :gutter="10"
          class="home">
    <el-col :span="20"
            class="yangshi">
      <el-card>

              <h2>{{mydetails.repairDescription}}</h2>

            <p>提交人:{{mydetails.userName}} <span> 时间：{{mydetails.createTime}}</span> <span>所在部门：{{mydetails.deptName}} </span></p>

        <div>
          <el-row :gutter="10">
            <el-col :span="15">
              <div class="grid-content">
                <div>
                  <p>工单编号: <span class="ii">{{mydetails.orderNo}}</span></p>
                </div>

                <div>
                  <p>工单类别: <span class="ii">{{mydetails.repairTypeV1}}</span></p>
                </div>
                <div>
                  <p>问题描述: <span class="ii"> {{mydetails.repairDescription}}</span></p>
                </div>
                <div>
                  <p>提交时间: <span class="ii">{{mydetails.createTime}}</span></p>
                </div>
                <div>
                  <p>工单状态: <span class="ii">{{mydetails.repairStatus}}</span></p>
                </div>
              </div>
            </el-col>

            <el-col :span="9">
              <div class="grid-content bg-purple-light">
                <!-- <div>
                  <img src="../../../../img/b59390629aa99bcf5d016801bc259db0_t01f75c69e081245051.jpg"
                       alt="" />
                </div> -->
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-col>

    <el-row :gutter="20">
      <el-col :span="20"
              push="0"
              class="yangshi">
        <el-card>
          <div slot="header">
            <div>
              <h3>我要反馈：</h3>
            </div>
          </div>
          <div>
            <el-input type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4 }"
                      placeholder="请输入内容"
                      v-model="textarea3">
            </el-input>
          </div>

          <div>
            <el-row class="row-bg"
                    justify="space-around">
              <el-col :span="8"
                      puch="10">
                <div class="" style="width: 300px">
                  <el-button @click="ssss">关闭工单</el-button>
                  <el-button type="primary" @click="submit">提交</el-button>
                  <el-button type="danger">删除</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="20"
              push="0"
              class="yangshi">
        <el-card>
          <div slot="header"
               class="clearfix">
            <span>全部沟通表</span>
            <el-button style="float: right; padding: 3px 0"
                       type="text" @click="sss">刷新</el-button>
          </div>
          <div v-for="(user,i) in List1"
               :key="i"
               class="text item">
            <div>
             <p>
              用户： {{user.userName}} 时间 ： {{user.createTime}}
             </p>
              评论内容 :<h1> {{user.content}}</h1>
            </div>
          </div>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="list1"
          />
        </el-card>
      </el-col>
    </el-row>
  </el-row>
</template>
<script>
import {findDetails} from '@/api/repair/order'
import {sub , find} from "@/api/orderDatails/orderdatails";

export default {

  data() {
    return {
      // 输入框拿的值
      textarea2: '',

      textarea3: '',
      List1:[],
      subb:{
        content : '',
        order : '',
        userName:'',
        userId:''
      },
      mydetails : [],

      queryParams: {
        pageNum: 1,
        pageSize: 3,
        orderNo:''
      },
    }
  },

  created() {
    this.getList();
  }
  ,
  methods: {
    getList(){
        this.orderNo = this.$cache.session.get('key')
      this.queryParams.orderNo = this.orderNo
      findDetails(this.orderNo).then(response =>{
        this.$modal.msgSuccess("查询成功");
        this.mydetails = response.data;
      })
      find(this.queryParams,this.orderNo).then(response =>{
        this.List1 = response.rows;
        this.total = response.total;
        console.log(  this.queryParams.orderNo )
      })
    },
    submit(){
      this.subb.order  = this.orderNo
      this.subb.content = this.textarea3
      this.subb.userName   =this.mydetails.userName
      this.subb.userId = this.mydetails.userid;
      sub(this.subb).then(response =>{
        this.$modal.msgSuccess("提交成功")
        this.getList()
        this.textarea3 = ''
        console.log(response)
      })
    },
    sss(){
      this.$modal.msgSuccess("刷新成功")
      this. getList()
    },
    ssss(){
      this.$tab.closePage();

    }
  },
}
</script>
<style>
.yangshi {
  margin-top: 30px;
  margin-left: 90px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 100px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
p {
  margin-bottom: 20px;
}
.ii {
  padding: 50px;
}
img {
  width: 155px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
